<template>
  <div>
    <el-cascader
      v-model="value"
      :options="options"
      filterable
      size="medium"
      @change="handleChange"></el-cascader>
  </div>
</template>

<script>
  import province from './province'
  export default {
    name: 'Treepicker',
    data(){
      return {
        value:[],
        options:null,
        province:[]
      }
    },
    created() {
      let cityList=[];
      this.formatCity(province[100000],cityList);
      this.options=cityList;
    },
    methods:{
      handleChange(e){
         this.province=e
         this.$emit('province',this.province)
      },
      formatCity(ARR,array){
        for (const key in ARR) {
          let obj={}
          obj.value=key;
          obj.label=ARR[key];
          array.push(obj);
          if(province[key]){
            obj.children=[]
            this.formatCity(province[key],obj.children)
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
